<!--  记得import .js中自定义的方法-->

<template>
  <div>
    <!--对话框    添加和更新用的 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%">    <!--  dialogFormVisible是自定义的弹窗名  -->
      <el-form :model="employee" :rules="employeeRules" ref="employeeRulesForm"
               :disabled="employee.state == 0 ? false :employee.state == 1 ? true :employee.state == 2 ? true :employee.state == 3 ? true:false">

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="employee.name" autocomplete="off" style="width:400px"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="employee.sex" autocomplete="off" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="employee.age" autocomplete="off" style="width:400px"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="住址" prop="address">
              <el-input v-model="employee.address" autocomplete="off" style="width:395px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="面试岗位" prop="post">
              <el-input v-model="employee.post" autocomplete="off" style="width:300px"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="面试时间" prop="time">
              <el-date-picker
                v-model="employee.time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期和时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="employee.description" autocomplete="off" style="width:890px "></el-input>
        </el-form-item>

        <el-form-item label="建议薪资" prop="suggestSalary">
          <el-input v-model="employee.suggestSalary" autocomplete="off" style="width:860px"></el-input>
        </el-form-item>


        <el-row :gutter="40">
          <!--     如果当前行的信息是领导审批状态就显示意见和薪资,如果身份不是领导禁用   -->
          <el-form-item v-show="employee.state == 1">
            <el-col :span="12">
              <el-form-item label="领导意见" >
                <el-input
                  v-model="employee.opinion"
                  autocomplete="off"
                  style="width: 400px"
                  placeholder="请输入意见"
                  :disabled="name == 'rs'"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="薪资">
                <el-input
                  v-model="employee.salary"
                  autocomplete="off"
                  style="width: 395px"
                  placeholder="请输入薪资"
                  :disabled="name == 'rs'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="baoCun('employeeRulesForm')">保存</el-button>
        <el-button type="primary" @click="tiJiao('employeeRulesForm')">提交</el-button>
      </div>
    </el-dialog>


    <!--    上方按钮行-->
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" v-show="name === 'rs'">
      <!-- 最后加的keyword和searchForm -->


      <el-button type="primary" size="small" @click="openAddDialog" icon="el-icon-plus"
                 style="margin-left: 30px; margin-right: 30px; margin-top: 6px">新增
      </el-button>


      <el-form-item>
        <el-button type="primary" plain size="small" @click="downloadExcel" icon="el-icon-download"
                   style="margin-top: 6px">导出
        </el-button>
      </el-form-item>
    </el-form>


    <!-- 中间行数据栏 -->
    <el-table v-loading="loading" :data="payList" @selection-change="handleSelectionChange">
      <!--      <el-table-column type="selection" width="25" align="center"/>-->
      <el-table-column label="姓名" align="center" prop="name" :width="80"/>
      <el-table-column label="性别" align="center" prop="sex" :width="50"/>
      <el-table-column label="年龄" align="center" prop="age" :width="50"/>
      <el-table-column label="住址" align="center" prop="address" :width="150"/>
      <el-table-column label="面试岗位" align="center" prop="post" :width="110"/>
      <el-table-column label="面试时间" align="center" prop="time" :width="150"/>
      <el-table-column label="描述" sortable align="center" prop="description" :width="600"/>
      <el-table-column label="建议薪资" align="center" prop="suggestSalary" :width="80"/>

      <el-table-column label="审批状态" align="center" prop="state" :width="80">
        <!--        插槽-->
        <template slot-scope="scope">
          <el-tag
            :type=" scope.row.state == '0' ? 'warning' : scope.row.state == '1' ? '' :scope.row.state == '2' ? 'success' :'danger' ">
            <span>{{
                scope.row.state == '0' ? '人事编写' : scope.row.state == '1' ? '领导审批' : scope.row.state == '2' ? '通过' : '未通过'
              }}</span>
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">  <!-- 操作栏 -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.$index, scope.row)">{{ scope.row.state === '0' ? '编辑' : '查看' }}
          </el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-show="name == 'rs'"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6,8,10,200]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>


<script>
import row from "element-ui/packages/row";
// /////////////////      ///////////////////////////////////////
import {addEmployee, deleteById, edit, getList} from "@/api/employee";
import {mapGetters} from "vuex";

export default {
  computed: {
    row() {
      return row
    },
    ...mapGetters([
      'name'
    ])
  },

  methods: {
    fetchData() { // 获取数据
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // nameCode: this.keyword.nameCode,
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log(params);
      // getList是api/unit.js中自己
      getList(params).then(res => {
        let pageInfo = res.data;
        // console.log("pageInfo", pageInfo)
        this.loading = false;
        this.payList = pageInfo.list;
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log("使用以上参数,findAll查到共", this.total, "条数据")    // 打印总行数(不分页)

      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = [];
      // 选项行（选中改变得到选中的这一行数据）
      // console.log("装着n个对象的数组: ", selectionRowArr)
      // 数组里面还是数组
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].buyOrder)
        // selectionRow[i].planNumber // 元素.对象
      }
      // console.log("看看ids数组: (数字数组)", this.ids)
      // 该方法至此完成任务
    },

    // 打开添加对话框
    openAddDialog() {
      this.title = '添加';
      this.dialogFormVisible = true;
    },

    baoCun(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          console.log("添加status", this.employee)
          if (this.title === '添加') {
            this.employee.state = '0'; // 提交为人事编写状态
            addEmployee(this.employee).then(res => {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.fetchData()
              this.$refs[formName].resetFields();
            })
          } else if (this.title === '编辑') {
            this.employee.state = '0'; // 提交为人事编写状态
            edit(this.employee).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功',
              });
              this.fetchData()
              this.$refs[formName].resetFields();
            })
          }


        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },

    tiJiao(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          console.log("添加status", this.employee)
          if (this.title === '添加') {
            this.employee.state = '1'; // 提交为领导审批状态
            addEmployee(this.employee).then(res => {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.fetchData()
              this.$refs[formName].resetFields();
            })
          } else if (this.title === '编辑') {
            this.employee.state = '1'; // 提交为领导审批状态
            edit(this.employee).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功',
              });
              this.fetchData()
              this.$refs[formName].resetFields();
            })
          }


        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false;
      });
    },

    // 导出excel
    // 导出excel
    // 导出excel
    downloadExcel() {
      this.$confirm('确定要导出数据吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 方案1: 原生js方式发起导
        // 出excel请求,后端设置响应格式
        window.location.href = "http://localhost:8080/employee/download/excel"
        // 方案1的话后端需要设置响应格式和内容
      }).catch(() => {
        this.$message({
          type: "info",
          message: '已取消导出数据！'
        })
      })
    },

    // ID删除
    handleDelete(row) {
      console.log("接收到选中的id为" + row);
      this.$confirm('是否确认删除单位编码为' + row.id + '的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        let params = {
          id: row.id
        }
        deleteById(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1000,
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000,
        });
      });
    },


  },
  name: "Provider",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位表格数据
      payList: [],
      pageNum: 1,
      pageSize: 6,
      currentPage: 1,
      total: 0,
      ids: [],
      // keyword: {
      //   nameCode: null,
      //   status: null,
      //   // measureName: null,
      // },
      title: '',
      dialogFormVisible: false,
      inputValue: '',  // 在data()中声明inputValue，用于存储<el-autocomplete>的输入值
      restaurants: [],
      state1: '',
      state2: '',
      employee: {
        name: null,
        sex: null,
        age: null,
        address: null,
        post: null,
        time: null,
        description: null,
        suggestSalary: null,
        state: null,
        opinion: null,
        salary: null,
        //   写不写scope.row都能获得整行数据，包括未显示的
      },

      // options: [{
      //   value: '采购中',
      // }, {
      //   value: '待采购',
      // }, {
      //   value: '已驳回',
      // },],
      // value: '',

      // rule1
      // rule
      // rule
      // rule
      employeeRules: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'},
        ],
        age: [
          {required: true, message: '年龄不能为空', trigger: 'blur'},
        ],

      },

      handleUpdate(a, b) {
        console.log(a, b);
        console.log("打印a（本页行下标）", a);
        console.log("打印b（整行数据）", b);
        this.title = '编辑';
        this.employee = b;   // 回显
        this.dialogFormVisible = true;
      },


    }
  },
  created() {
    this.fetchData()
  },
}
</script>


<style scoped>

</style>
